<template>
  <view class="faq-container">
    <view class="wechat">
      <view class="tips">
        <text>长按关注「有来技术」公众号，获取交流群二维码。</text>
      </view>
      <view class="flex-center">
        <image
          class="w-158px h-158px"
          :show-menu-by-longpress="true"
          src="/static/images/youlai-mp-qr-code.png"
          mode="aspectFit"
        />
      </view>
      <view>
        <text>如果交流群的二维码过期，请加微信(</text>
        <text :user-select="true" :selectable="true">haoxianrui</text>
        <text>)并备注「前端」、「后端」或「全栈」以获取最新二维码。</text>
      </view>
      <view>
        <text>为确保交流群质量，防止营销广告人群混入，我们采取了此措施。望各位理解！</text>
      </view>
    </view>

    <wd-collapse v-model="value">
      <wd-collapse-item title="开源项目issues" name="item1">
        <!-- #ifdef H5 -->
        <a href="https://gitee.com/youlaiorg/vue-uniapp-template/issues">#issues</a>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <text :user-select="true">https://gitee.com/youlaiorg/vue-uniapp-template/issues</text>
        <!-- #endif -->
      </wd-collapse-item>
      <wd-collapse-item title="小程序分包" name="item2">
        <view>
          <text>
            分包主要是因为小程序平台对主包大小有限制（微信小程序的规则是主包不超过2M，每个分包不超过2M，总体积一共不能超过20M），
            分包不需要按照业务模块来分，可以将多个业务模块放入一个分包中，直到这个分包达到小程序的大小限制才考虑下一个分包。
            uniapp的用法与微信官方文档一样，具体参见：
          </text>
          <!-- #ifdef H5 -->
          <a
            href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html"
          >
            微信官方文档-分包
          </a>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <text :user-select="true" :selectable="true">
            https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
          </text>
          <!-- #endif -->
        </view>
        <view class="mt-15rpx">
          <text>
            以下是一个简单示例。以下示例中创建了两个分包，分包a中包含两个页面，分包b中包含一个页面。
          </text>
          <text class="mt-15rpx">
            请注意，如果想把分包页面中使用的组件打包到分包中，则需要将组件放入对应的分包目录下，否则组件会被打包到主包中。
          </text>
        </view>
        <view class="mt-15rpx">
          <text>目录结构：</text>
        </view>
        <rich-text :nodes="subListStr" />
        <view class="mt-15rpx">
          <text>在pages.json文件中声明分包结构：</text>
        </view>
        <rich-text :nodes="pagesStr" />
      </wd-collapse-item>
    </wd-collapse>
  </view>
</template>

<script lang="ts" setup>
const value = ref<string[]>(["item1"]);
const subListStr = ref<string>(`
<pre style="background-color: #f9f9fa"><code>
|-- components    //主包组件目录
|-- pages         //主包页面目录
|   |-- index
|-- sub-pkg-a
|   |-- components    //分包组件目录
|   |-- pages         //分包页面目录
|   |   |-- cat
|   |   |-- dog
|-- sub-pkg-b
|   |-- components    //分包组件目录
|   |-- pages         //分包页面目录
|   |   |-- apple</code></pre>
`);

const pagesStr = ref<string>(`<pre style="background-color: #f9f9fa"><code>
{
  "pages":[
    {
      "path": "pages/index",
      "style": {
        "navigationBarTitleText": "主页"
      }
    }
  ],
  "subPackages": [
    {
      "root": "sub-pkg-a",
      "pages": [
        {
          "path": "pages/cat",
          "style": {
            "navigationBarTitleText": "cat"
          }
        },
        {
          "path": "pages/dog",
          "style": {
            "navigationBarTitleText": "dog"
          }
        }
      ]
    },
    {
      "root": "sub-pkg-b",
      "pages": [
        {
          "path": "pages/apple",
          "style": {
            "navigationBarTitleText": "apple"
          }
        }
      ]
    }
  ]
}</code></pre>
`);
onMounted(() => {});
</script>

<style lang="scss" scoped>
.faq-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  .wechat {
    padding: 30rpx;
    margin: 20px 0;
    font-size: 14px;
    color: var(--wot-card-content-color, rgba(0, 0, 0, 0.45));
    background-color: #fff;
    .tips {
      font-weight: bold;
      text-align: center;
    }
  }
}
</style>
